<script setup lang="ts">
import { createCommunity } from '@/api/community';
import { Community } from '@/api/community/type';
import { router } from '@/router';
import { ref } from 'vue';
import { showNotify } from 'vant';

const community = ref({
    name: '',
    description: '',
    title: ''
} as Community);

const file = ref({
    url: '',
    avatar: null as File | null
});

const formSubmitting = ref(false);

const onSubmit = async () => {
    if (!community.value.name) {
        showNotify({ 
            type: 'warning', 
            message: '请输入社区名称', 
            position: 'top'
        });
        return;
    }
    
    if (!file.value.avatar) {
        showNotify({ 
            type: 'warning', 
            message: '请上传社区图标', 
            position: 'top'
        });
        return;
    }
    
    try {
        formSubmitting.value = true;
        await createCommunity(
            file.value.avatar, 
            community.value.name, 
            community.value.description, 
            community.value.title
        );
        
        showNotify({ 
            type: 'success', 
            message: '社区创建成功', 
            position: 'top'
        });
        router.push('/community');
    } catch (error) {
        console.error('创建社区失败:', error);
        showNotify({ 
            type: 'danger', 
            message: '创建社区失败', 
            position: 'top'
        });
    } finally {
        formSubmitting.value = false;
    }
}

const afterRead = (uploader: any) => {
    if (!uploader.file) return;
    
    file.value.url = uploader.content as string;
    file.value.avatar = uploader.file as File;
}

const goBack = () => {
    router.back();
}
</script>

<template>
    <div class="community-create-page">
        <!-- 页面标题和返回按钮 -->
        <div class="page-header">
            <button class="back-button" @click="goBack">
                <van-icon name="arrow-left" />
            </button>
            <h1 class="page-title">创建新社区</h1>
            <div class="placeholder"></div>
        </div>
        
        <div class="create-form-container">
            <!-- 社区表单 -->
            <van-form @submit="onSubmit" class="community-form">
                <!-- 社区图片上传 -->
                <div class="upload-section">
                    <van-uploader 
                        :after-read="afterRead" 
                        :max-count="1"
                        upload-text="上传社区图标"
                        preview-size="100"
                        class="avatar-uploader"
                    >
                        <template #default>
                            <div class="upload-area">
                                <div v-if="file.url" class="preview-container">
                                    <img :src="file.url" class="avatar-preview" alt="社区图标预览" />
                                </div>
                                <div v-else class="upload-placeholder">
                                    <van-icon name="photograph" />
                                    <span>上传社区图标</span>
                                </div>
                            </div>
                        </template>
                    </van-uploader>
                </div>
                
                <van-cell-group inset>
                    <!-- 社区名称 -->
                    <van-field
                        v-model="community.name"
                        label="社区名称"
                        placeholder="给你的社区起个名字"
                        :rules="[{ required: true, message: '请输入社区名称' }]"
                        required
                    />
                    
                    <!-- 社区描述 -->
                    <van-field
                        v-model="community.description"
                        label="社区简介"
                        type="textarea"
                        placeholder="描述一下你的社区吧"
                        :rows="4"
                        autosize
                        show-word-limit
                        maxlength="200"
                        :rules="[{ required: true, message: '请输入社区简介' }]"
                        required
                    />
                    
                    <!-- 成员称号 -->
                    <van-field
                        v-model="community.title"
                        label="成员称号"
                        placeholder="设置社区成员的称呼"
                        :rules="[{ required: true, message: '请输入成员称号' }]"
                        required
                    />
                </van-cell-group>
                
                <!-- 提交按钮 -->
                <div class="form-actions">
                    <van-button 
                        round 
                        block 
                        type="primary" 
                        native-type="submit" 
                        :loading="formSubmitting"
                        :disabled="formSubmitting || !community.name || !community.description"
                    >
                        {{ formSubmitting ? '创建中...' : '立即创建' }}
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.community-create-page {
    background-color: #f7f8fa;
    min-height: calc(100vh - 108px);
    
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        background-color: white;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        
        .back-button {
            width: 36px;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: transparent;
            border: none;
            cursor: pointer;
            border-radius: 50%;
            
            &:hover {
                background-color: #f2f3f5;
            }
            
            .van-icon {
                font-size: 20px;
            }
        }
        
        .page-title {
            font-size: 18px;
            font-weight: 600;
            color: #323233;
            margin: 0;
        }
        
        .placeholder {
            width: 36px;
        }
    }
    
    .create-form-container {
        padding: 16px;
        max-width: 600px;
        margin: 0 auto;
        
        .community-form {
            .upload-section {
                display: flex;
                justify-content: center;
                margin-bottom: 24px;
                
                .avatar-uploader {
                    .upload-area {
                        width: 100px;
                        height: 100px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        border: 1px dashed #dcdee0;
                        border-radius: 8px;
                        cursor: pointer;
                        overflow: hidden;
                        transition: all 0.3s;
                        
                        &:hover {
                            border-color: #1989fa;
                            background-color: rgba(25, 137, 250, 0.05);
                        }
                        
                        .preview-container {
                            width: 100%;
                            height: 100%;
                            
                            .avatar-preview {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                        
                        .upload-placeholder {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            gap: 8px;
                            color: #969799;
                            
                            .van-icon {
                                font-size: 24px;
                            }
                        }
                    }
                }
            }
            
            .form-actions {
                margin-top: 32px;
                padding: 0 16px;
            }
        }
    }
}
</style>